<template>
    <div class="ImagesFile">
        <div class="photo" v-on:click="imagesFiles()">
            <p class="add">添加照片</p>
            <img src="./../../../static/img/phone.png">
            <p class="add_text">(最多可添加九张照片)</p>
        </div>
        <ul class="imageShow fn-clear">
            <li v-for="(item,index) in imageList" v-on:click="removeImage(index)" :key="item.id">
                <div class="images">
                    <img v-bind:src="item">
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: "ImagesFile",
    props: ["dataArray"],
    data: function () {
        return {
            imageList: [],
        }
    },
    methods: {

        //提交图片，调用DDAPI 中的图片方法。
        imagesFiles: function () {
            let imageNum = 9 - this.imageList.length;
            if (imageNum == 0) {
                // this.$ddapi.toast("图片数量已满！")
                return;

            }
            this.$ddapi.uploadImages(imageNum).then(res => {
                res.map(item => {
                    this.imageList.push(item)
                })
            })
        },

        //删除上传的图片
        removeImage: function (index) {
            this.$ddapi.confirm("请点击确认删除图片").then(res => {
                if (res == 1) {
                    return;
                };
                this.imageList.splice(index, 1)
            });
        }
    },
    created: function () {
        if (this.dataArray) {
            this.imageList = JSON.parse(this.dataArray);
        }

    }
}
</script>
<style scoped lang="less">
.imageShow li {
    float: left;
    width: 32%;

    padding: 0.5rem 0.8rem;
}

.imageShow .images {
    // height: 580px;
    // overflow: scroll;
    width: 10rem;
    height: 10rem;
    border: 1px #c9c9c9 solid;
    overflow: hidden;
    line-height: 6.4rem;
    text-align: center;
}

.imageShow .images img {
    max-width: 10rem;
    max-height: 10rem;
    transform: scale(2);
    vertical-align: middle;
}

// .ImagesFile .addFile {
//     width: 6.4rem;
//     height: 6.4rem;
//     border: 1px #c9c9c9 solid;
//     position: relative;
// }
// .ImagesFile .addFile::before,
// .ImagesFile .addFile::after {
//     content: "";
//     position: absolute;
//     background-color: #c9c9c9;
//     top: 50%;
//     left: 50%;
// }
// .ImagesFile .addFile::before {
//     width: 3.3rem;
//     height: 0.2rem;
//     margin: -0.1rem 0 0 -1.65rem;
//     background-color: #c9c9c9;
// }
// .ImagesFile .addFile::after {
//     content: "";
//     width: 0.2rem;
//     height: 3.3rem;
//     margin: -1.65rem 0 0 -0.1rem;
// }
.photo {
    padding-top: 0.8rem;
    display: inline-block;
    margin-left: 3.2rem;
    position: relative;
    img {
        position: absolute;
        left: 180%;
        top: 33%;
        width: 3rem;
        text-align: right;
    }
}

.add {
    font-size: 1.5rem;
}

.add_text {
    font-size: 1.3rem;
    color: #bab9b9;
}
</style>